<template>
	<view class="mock-test-container">
		<view class="mock-test-title">请选择试卷</view>
		<scroll-view scroll-y="true" style="height: calc(100vh - 460rpx)">
			<view class="mock-test-list">
				<view v-for="(item, index) in list" :key="index" @click="itemClickHandle(item)" class="list-item"
					:class="{ active: active == item.id }">
					<text class="title flex flex-auto">{{ item.name }}</text>
					<image class="icon" v-if="active == item.id" src="/static/images/work/dbd/selected_yes.png">
					</image>
					<image class="icon" v-else src="/static/images/work/dbd/selected_no.png"></image>
				</view>
			</view>
		</scroll-view>

		<view class="next-step-btn" @click="btnClickHandle"> 下一步 </view>

		<!-- 题库训练进入时 -->
		<tip-dialog v-model="tipDialogVisible" @confirm="keepOn" @cancel="giveUp" :type="'primary'">
			<view>当前做题进度 {{ count }}/ {{ totalCount }} 题</view>
			<!-- <view>剩余时间：22:20</view> -->
		</tip-dialog>
	</view>
</template>

<script>
	import {
		getPaperList
	} from '@/api/educational-training/simulation-test.js';
	import {
		questionSituation,
		deleteQuestionRecord,
	} from '@/api/educational-training/examination.js';
	import TipDialog from './TipDialog';

	export default {
		components: {
			TipDialog,
		},
		data() {
			return {
				type: '',
				active: undefined,
				list: [],
				tipDialogVisible: false,
				count: '',
				totalCount: '',
			};
		},
		onLoad({
			type
		}) {
			this.type = type;
		},
		mounted() {
			this.getList();
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '/pages/work/mock-test-record/mock-test-record',
			});
		},
		methods: {
			getList() {
				getPaperList({
					questionMethod: 2,
					pageSize: 1000
				}).then((res) => {
					this.list = res.rows;
					if (res.rows[0] && res.rows[0].id) {
						this.active = res.rows[0].id;
					}
				});
			},
			itemClickHandle(item) {
				this.active = item.id != this.active ? item.id : undefined;
			},
			btnClickHandle() {
				console.log('00000');
				if (!this.active) {
					uni.showToast({
						icon: 'error',
						title: '请选择试卷',
					});
					return;
				}

				console.log('type', this.type);
				uni.navigateTo({
					url: `/pages/work/online-examination/paper-info?id=${this.active}`,
				});

				// uni.navigateTo({ url: `/pages/work/online-examination/paper-info?type=${this.getRoute().type}&id=${this.active}` })
				// uni.navigateTo({ url: `/pages/work/online-examination/take-part-examination?type=${this.getRoute().type}&id=${this.active}` })
			},
			// 获取路由参数
			getRoute() {
				let pages = getCurrentPages();
				let curPage = pages[pages.length - 1];
				return curPage.options || curPage.$route.query;
			},
			// 继续训练
			keepOn() {
				uni.navigateTo({
					url: `/pages/work/online-examination/take-part-examination?type=${
          this.getRoute().type
        }&id=${this.active}&count=${this.count}&totalCount=${this.totalCount}`,
				});
			},
			// 重新训练
			giveUp() {
				deleteQuestionRecord(this.active).then((res) => {
					uni.navigateTo({
						url: `/pages/work/online-examination/take-part-examination?type=${
            this.getRoute().type
          }&id=${this.active}&count=${this.count}&totalCount=${
            this.totalCount
          }`,
					});
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.mock-test-container {
		padding: 80rpx 50rpx;
		background: #fff;
		height: calc(100vh - 88rpx);
		/* #ifdef APP-PLUS */
		height: 100vh;
		/* #endif */
		overflow-y: auto;

		.mock-test-title {
			font-size: 48rpx;
			color: #333333;
			line-height: 67rpx;
			margin-bottom: 50rpx;
		}

		.mock-test-list {
			.list-item {
				min-height: 150rpx;
				background: #f6f7f9;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 40rpx;
				padding: 0 40rpx;
				border: 1rpx solid #f6f7f9;
				transition: ease-in-out 0.1s;

				&:active {
					transform: scale(0.99);
				}

				&.active {
					box-shadow: 0px 10rpx 20rpx 1rpx rgba(44, 170, 184, 0.1);
					border: 1rpx solid #88b4c4;
				}

				.title {
					font-size: 36rpx;
					font-weight: bold;
					color: #333333;
					word-break: break-all;
				}

				.icon {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}

		.next-step-btn {
			position: fixed;
			left: 75rpx;
			right: 75rpx;
			bottom: 40rpx;
			height: 98rpx;
			background: #454a5e;
			border-radius: 50rpx;
			font-size: 36rpx;
			color: #ffffff;
			line-height: 98rpx;
			text-align: center;
		}
	}
</style>
